<script setup lang="ts">
import { addPatientAPI, editPatientAPI, getPatientDetailAPI } from '@/apis/patient'
import type { AddPatientParams } from '@/types/patient'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
const patientParams = ref<AddPatientParams>({
  defaultFlag: 0,
  gender: 0,
  idCard: '',
  name: '',
})
// 表单校验规则
const patientrules = ref<UniHelper.UniFormsRules>({
  name: {
    rules: [
      { required: true, errorMessage: '请填写患者姓名' },
      {
        pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/,
        errorMessage: '请填写正确的姓名',
      },
    ],
  },
  idCard: {
    rules: [
      { required: true, errorMessage: '请填写患者身份证号' },
      {
        pattern:
          /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
        errorMessage: '请填写正确的身份证号',
      },
    ],
  },
  gender: {
    rules: [
      { required: true, errorMessage: '请选择患者性别' },
      {
        validateFunction(rule, value, data, callback) {
          const idCardGenderNum = patientParams.value.idCard.charAt(16)
          if (Number(idCardGenderNum) % 2 !== value) {
            callback('性别选择与身份证号不符')
          }
          return true
        },
      },
    ],
  },
})
const form = ref<UniHelper.UniFormsInstance>()
const onSubmit = async () => {
  await form.value?.validate?.()
  if (props.id) {
    const res = await editPatientAPI({ ...patientParams.value, id: props.id })
    uni.showToast({ title: '编辑成功', icon: 'success' })
    uni.navigateBack()
  } else {
    const res = await addPatientAPI(patientParams.value)
    uni.navigateBack()
  }
}

// 设置默认就诊人
const onChangeDefaultFlag = (event: UniHelper.SwitchOnChangeEvent) => {
  patientParams.value.defaultFlag = event.detail.value ? 1 : 0
  console.log('event', event)
}

// 接收页面传递的id
const props = defineProps<{ id: string }>()
console.log('props', props)
uni.setNavigationBarTitle({ title: props.id ? '编辑患者' : '添加患者' })
// 获取患者详情
const getPatientDetail = async () => {
  const res = await getPatientDetailAPI(props.id)
  patientParams.value.defaultFlag = res.data.defaultFlag
  patientParams.value.gender = res.data.gender
  patientParams.value.idCard = res.data.idCard
  patientParams.value.name = res.data.name
}
onShow(() => {
  if (props.id) {
    getPatientDetail()
  }
})
</script>

<template>
  <scroll-view>
    <view class="archive-page">
      {{ patientParams }}
      <uni-forms
        border
        label-width="220rpx"
        ref="form"
        :model="patientParams"
        :rules="patientrules"
      >
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            v-model="patientParams.name"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            v-model="patientParams.idCard"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            v-model="patientParams.gender"
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
            <switch
              :checked="patientParams.defaultFlag === 1"
              @change="onChangeDefaultFlag"
              color="#20c6b2"
              style="transform: scale(0.7)"
            />
          </view>
        </uni-forms-item>
        <button class="uni-button" @tap="onSubmit">保存</button>
      </uni-forms>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './index.scss';
</style>
